<template>
  <div id="navigation"
       class="clearfix">
    <img class="logo"
         src="/images/logo.png"
         alt="logo" />
    <h2 class="title"><i class="iconfont">&#xe613;</i> 首页</h2>
    <h2 class="title"><i class="iconfont">&#xe7f9;</i> 分类</h2>
    <h2 class="title"><i class="iconfont">&#xe655;</i> 关于</h2>
    <div class="btn">
      <a v-if="!login_flag"
         id="login"
         @click="loginhandle">登录</a>
      <div v-else>
        <img :src="avatar_url" />
        <ul>
          <li>{{ login }}</li>
          <li @click="exit">退出登录</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      login_flag: false,
      login: "",
      avatar_url: "",
    };
  },
  mounted() {
    let id = localStorage.getItem("personalblob_id");
    if (id != null) {
      this.login_flag = true;
      this.login = localStorage.getItem("personalblob_login");
      this.avatar_url = localStorage.getItem("personalblob_avatar_url");
    }
  },
  methods: {
    loginhandle() {
      const a = document.getElementById("login");
      const client_id = "941f7f3ea2755d038b0f";

      const authorize_uri = "https://github.com/login/oauth/authorize";
      const redirect_uri = "http://localhost:3000/oauth/redirect";

      a.href = `${authorize_uri}?client_id=${client_id}&redirect_uri=${redirect_uri}`;
    },
    exit() {
      localStorage.removeItem("personalblob_id");
      localStorage.removeItem("personalblob_login");
      localStorage.removeItem("personalblob_avatar_url");
      this.$router.go(0);
    },
  },
};
</script>

<style lang="less" scoped>
#navigation {
  width: 100%;
  height: 96px;
  box-sizing: border-box;
  padding: 24px;

  .logo {
    width: 36px;
    height: 36px;
    vertical-align: middle;
    margin-right: 12px;
    cursor: pointer;
  }
  .title {
    display: inline-block;
    padding: 5px 10px;
    cursor: pointer;
  }
  .btn {
    float: right;
    cursor: pointer;

    img {
      width: 30px;
      height: 30px;
      float: right;
    }
    ul {
      display: none;

      li {
        width: 100%;
        padding: 2px;
      }
    }
  }
  .btn:hover ul {
    display: block;
  }
}
</style>
